<style scoped>
body{
    background-image:url(../img/bg1.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:0px 0px;

}
  .layout{
    border: 1px solid #d7dde4;
    /* background: #f5f7f9; */
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    height: 100%;
  }
  .layout-logo{
    width: 200px;
    line-height: 40px;
    height: 40px;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
    font-weight: bold;
    text-align: center;
    color: beige;
    font-size: 20px;
    align-content: center;
  }
  .layout-nav{
    width: 590px;
    margin: 0 auto;
    margin-right: 10px; 
  }
    .layout-nav a{
        color: antiquewhite;
    }
  .content-center{
        width: 100%;
        height: 40px;
        line-height: 40px;
        margin: 0 auto;
        margin-top: 10px;
        background: #f5f7f9;
        text-align: center; 
        font-size: 15px;
  }
    .row-a a{
        color: rgb(0, 20, 100);
    }

    .content-nav{
        width: 1000px;
        /* height: 2000px; */
        margin: 0 auto;
        /* border: 1px red solid; */
        
    }
    .content-nav-left{
        width: 30%;
        float: left;
        margin-top: 20px;
        
    }
    .content-nav-right{
        width: 68%;
        float: right;
        position: relative;
        margin-top: 20px;
        margin-left: 10px;
    }
    .icon_right{
        margin-right: 2px;
        color:yellowgreen;
        
    }
    .content-nav-top{
        width: 100%;

        /* border: 1px red solid; */
        /* text-align: center; */
    }
    .content-nav-top img{
        width: 100%;
        height: 350px;
    }
    .carousel-title{
        width: 100%;
        height: 50px;
        line-height: 50px;
        border-bottom: 0.5px lightsteelblue solid;
        /* font-size: 15px; */
        /* font-family: '黑体'; */
        /* font-weight:initial; */
        /* border-radius: 10%; */
    }
    .carousel-nav{
        width: 100%;
        /* height: 150px; */
        margin-top: 10px;
        border-bottom: 1px solid lightsteelblue;
    }
    .cn-row{
        margin-top: 20px;
    }
  .layout-footer-center{
      border: 1px solid #d7dde4;
      background-color: #d7dde4;
    text-align: center;
    margin-top: 20px;
  }
  .zixun{
        /* border-: 1px solid lightsteelblue; */
        margin: 0 auto;
        text-align: center
  }
</style>

<template>
    <div class="layout">
        <Layout>
            <Header>
                <Menu mode="horizontal" theme="dark" active-name="1" >
                    <div class="layout-logo">游戏资讯分享平台</div>
                    <div class="layout-nav">
                         <MenuItem name="1">
                            <a @click="Home('Home')">头条</a>
                        </MenuItem>
                        <MenuItem name="2">
                            <a @click="SportsCircle('sportsClick')" >资讯社区</a>
                        </MenuItem>
                        <MenuItem name="3">
                            <a @click="Team('Team')">游戏库</a>
                        </MenuItem>
                        <MenuItem name="4">
                            <a  @click="MyTieZi('MyTieZi')" >我的资讯</a>
                        </MenuItem>
                        <MenuItem name="5">
                            <a @click="TableMain('TableMain')">关于我
                            </a>
                        </MenuItem>
                         <MenuItem name="6">
                            <a @click="adminOut('adminOut')" style="color:red">退出登录</a>
                        </MenuItem>
                    </div>
                </Menu>
            </Header>

            <content :style="{padding:'0 50px'}">
             
               <div class="content-nav">
                   <div class="content-nav-top">
                        <Carousel autoplay>
                            <Carousel-item>
                                <div class="demo-carousel"><img src="../img/x1.jpg"/></div>
                            </Carousel-item>
                            <Carousel-item>
                                <div class="demo-carousel"><img src="../img/x2.jpg"/></div>
                            </Carousel-item>
                            <Carousel-item>
                                <div class="demo-carousel"><img src="../img/x3.jpg"/></div>
                            </Carousel-item>
                            <Carousel-item>
                                <div class="demo-carousel"><img src="../img/x4.jpg"/></div>
                            </Carousel-item>
                             <Carousel-item>
                                <div class="demo-carousel"><img src="../img/x5.jpg"/></div>
                            </Carousel-item>
                        </Carousel>
                   </div>
                   
                    <div class="content-nav-left">

                        <Card style="width:100%">
                            <p slot="title">
                                推荐
                            </p>
                            <ul style="list-style:none;">
                                <li v-for="item in movieList"  >
                                    <row>
                                        <i-col span="15"><a :href="item.url" target="_blank">{{ item.name }}</a></i-col>
                                        <i-col span="9">
                                            <span class="icon_right">
                                                <Icon type="ios-star" v-for="(n,index) in 4" :key="index"></Icon>
                                                <Icon type="ios-star" v-if="item.rate >= 9.5">
                                                </Icon><Icon type="ios-star-half" v-else></Icon>
                                                {{ item.rate }}
                                            </span>
                                        </i-col>
                                    </row>
                                </li>
                            </ul>
                        </Card>

                        <Card style="width:100%;margin-top: 20px;">
                            <p slot="title">
                                <Icon type="ios-cart"></Icon>
                                优惠信息
                            </p>
                            <ul style="list-style:none;">
                                <li v-for="(item,index) in movieList" :key="index">
                                    <row>
                                        <i-col span="15"><a :href="item.url" target="_blank">{{ item.name }}</a></i-col>
                                        <i-col span="9">
                                            <span class="icon_right">
                                                <Icon type="ios-star" v-for="(n,index) in 4" :key="index"></Icon>
                                                <Icon type="ios-star" v-if="item.rate >= 9.5">
                                                </Icon><Icon type="ios-star-half" v-else></Icon>
                                                {{ item.rate }}
                                            </span>
                                        </i-col>
                                    </row>
                                </li>
                            </ul>
                        </Card> 

                         
                    </div>
                    <!-- //新闻 -->
                    <div class="content-nav-right">
                        <div class="nav-carousel">
                           <div class="carousel-title">
                               <h3>热门资讯</h3>
                           </div>

                            <div class="carousel-nav" :key="index"  v-for="(item,index) in sportsList">
                               <Row class="cn-row">
                                    <i-col span="18"><h2><a>{{item.sname}}</a></h2></i-col>
                                    <i-col span="6"><h3>{{item.sdate}}</h3></i-col>
                                </Row>
                                <p class="cn-row"><h3>{{item.scontext}}</h3></p>
                                <Row class="cn-row">
                                    <i-col span="6">标签：{{item.sType}}</i-col> 
                                    <i-col span="6">作者：{{item.persons.username}} / {{item.persons.type}}</i-col> 
                                    <a style="float: right;font-size:15px;" @click="toolEventSlot(item.sid)">热门评论
                                        <Icon type="ios-arrow-down"></Icon>
                                    </a>
                                </Row>
                                  <div style="background:#eee;padding: 15px;margin-top: 5px;" v-show="cindex===item.sid&&showPrise" >
                                    <Form  ref="formInline" :model="formInline"  >
                                        <Row>
                                            <i-col span="21">
                                            <FormItem>
                                                <Input type="textarea" id="cContext" v-model="formInline.cContext"  :autosize="{minRows: 2,maxRows: 5}" placeholder="快来写两句话评论下吧！"></Input>
                                            </FormItem>
                                            </i-col>
                                             <i-col span="3">
                                            <FormItem>
                                                <Button type="primary" style=" margin-left:5px;height:50px;"  @click="handleSubmit(item.sid,'formInline')">发布评论</Button>
                                            </FormItem>
                                            </i-col>
                                        </Row>
                                    </Form>
                                    <Card :bordered="true" style="margin-top: 10px;"  v-for="(comm,index) in commentList" :key="index">
                                        <p slot="title">{{comm.persons.username}}
                                        </p>
                                        <p>{{comm.ccontext}}</p>
                                        <p>评论时间：{{comm.cdate}}</p>
                                    </Card>
                                </div>
                            </div>
                            <div class="fromAdd">
                                <div class="carousel-title" style="margin-bottom: 20px;">
                                    <h3>发布资讯</h3>
                                </div>
                                <Form :model="formSports" :label-width="80" style=" margin-left:-40px;" >
                                    <FormItem label="标题">
                                        <Input v-model="formSports.sName" placeholder="Enter something..."></Input>
                                    </FormItem>
                                    <FormItem label="内容">
                                        <Input v-model="formSports.sContext" type="textarea" :autosize="{minRows: 3,maxRows: 6}" 
                                        placeholder="Enter something...">
                                        </Input>
                                    </FormItem>
                                    <FormItem label="标签">
                                        <Select v-model="formSports.sType" id="stype">
                                            <Option  v-for="(zq,index) in zhuanquDate" :key="index" :value="zq.zname">{{zq.zname}}</Option>
                                        </Select>
                                    </FormItem>
                                    <FormItem>
                                        <Button type="primary"  @click="SportsAdd('formSports')">Submit</Button>
                                        <Button style="margin-left: 8px">Cancel</Button>
                                    </FormItem>
                                </Form>
                            </div> 
                            
                        </div>
                    </div>
                     
               </div>
            </content>
            <Footer class="layout-footer-center">2019-2020 &copy; TalkingData</Footer>
        </Layout>
    </div>
</template>

<script>
//右侧推荐
import axios from 'axios'
    export default {
         inject:["reload"],
        data () {
            //数据
            return {
                limitNum: 5,
                limitFrom: 0,
                movieList: [
                    {
                        name: 'CS:GO',
                        url: 'https://www.csgo.com.cn/index.html',
                        rate: 9.5
                    },
                    {
                        name: '怪物猎人世界',
                        url: 'https://tieba.baidu.com/f?kw=%B9%D6%CE%EF%C1%D4%C8%CB%CA%C0%BD%E7&fr=ala0&tpl=5',
                        rate: 9.6
                    },
                    {
                        name: '侠盗猎车手5',
                        url: 'https://tieba.baidu.com/f?kw=gta5&fr=ala0&tpl=5',
                        rate: 9.6
                    },
                    {
                        name: '使命召唤：战区',
                        url: 'https://tieba.baidu.com/f?kw=%CA%B9%C3%FC%D5%D9%BB%BD&fr=ala0&tpl=5',
                        rate: 8.6
                    },
                    {
                        name: '英雄联盟',
                        url: 'https://lol.qq.com/main.shtml',
                        rate: 8.1
                    },
                    {
                        name: '守望先锋',
                        url: 'https://ow.blizzard.cn/home',
                        rate: 8.9
                    },
                    {
                        name: '巫师3：狂猎',
                        url: 'https://baike.baidu.com/item/%E5%B7%AB%E5%B8%883%EF%BC%9A%E7%8B%82%E7%8C%8E/5357184?fromtitle=%E5%B7%AB%E5%B8%883&fromid=342800&fr=aladdin',
                        rate: 9.8
                    },
                    {
                        name: '魔兽世界',
                        url: 'https://wow.blizzard.cn/landing',
                        rate: 9.5
                    },
                    {
                        name: '全面战争：三国',
                        url: 'https://www.ali213.net/zt/twtk/?bdkp',
                        rate: 9.5
                    },
                    {
                        name: '星际争霸',
                        url: 'https://sc2.blizzard.cn/landing',
                        rate: 7.1
                    }
                ],
                formItem:{
                    a:""
                },
                showPrise:false,
                sportsList:[ ],
                commentList:[ ],
                cindex: -1,
                sportsNum:0,
                commentNum:0,
                formInline: {
                   cContext:""
                },
                formSports: {
                    sName:"",
                    sContext:"",
                    sType:""
                },
                userId:0,
                zhuanquDate:[],
            number:0
                
            }
        },
        methods: {
            changeLimit () {
                this.limitFrom = this.limitFrom === 0 ? 5 : 0;
            },//根据ID查询评论后展示
            toolEventSlot (sid) {
                 axios('http://localhost:8081/CommentFindAll?sId='+sid).then((res) =>{
                    this.commentList = res.data;
                    console.log(this.commentList);
                    this.showPrise = !this.showPrise;
                    this.cindex = sid;
                })
            },
            //点赞
            SportsUpdateZan (sid) {
                 axios('http://localhost:8081/SportsUpdateZan?sId='+sid).then((res) =>{
                    this.sportsNum = res.data;
                    if(this.sportsNum==1){
                        this.reload();
                    }else{
                        this.$Modal.confirm({
                            title: '点赞失败',
                            loading: true,
                            onOk: () => {
                            setTimeout(() => {
                                this.$Modal.remove();
                                this.$Message.info('异步关闭了对话框');
                            }, 1000);
                            }
                        });
                    }
                  
                })
            },
            //评论点赞
            CommentUpdateZan(cid) {
                axios('http://localhost:8081/CommentUpdateZan?cId='+cid).then((res) =>{
                    this.commentNum = res.data;
                    if(this.commentNum==1){
                        this.reload();
                    }else{
                        this.$Modal.confirm({
                            title: '点赞失败',
                            loading: true,
                            onOk: () => {
                            setTimeout(() => {
                                this.$Modal.remove();
                                this.$Message.info('异步关闭了对话框');
                            }, 1000);
                            }
                        });
                    }
                  
                })
            },
            //添加评论
            handleSubmit(sid) {
                console.log("sid:"+sid);
                console.log("this.formInline:"+this.formInline.cContext);
                this.userId = sessionStorage.getItem('userId');
                console.log(this.userId);
                axios('http://localhost:8081/CommentAdd?cSid='+sid+'&cContext='+this.formInline.cContext+"&sPid="+this.userId).then((res) =>{
                    this.commentNum = res.data;
                    if(this.commentNum==1){
                        this.reload();
                        this.$Message.success('操作成功!');
                    }else{
                        this.$Message.success('操作失败!');
                    }
                  
                })
            },
            //发表资讯
            SportsAdd(){
                console.log("this.formSports.sName:"+this.formSports.sName);
                console.log("this.formSports.sContext:"+this.formSports.sContext);
                console.log("this.formSports.stype:"+this.formSports.sType);
                this.userId = sessionStorage.getItem('userId');
                console.log(this.userId);
                axios('http://localhost:8081/SportsAdd?sName='+this.formSports.sName+
                    '&sContext='+this.formSports.sContext+"&sPid="+this.userId+"&sType="+this.formSports.sType
                    ).then((res) =>{
                    this.commentNum = res.data;
                    if(this.commentNum==1){
                        this.reload();
                        this.$Message.success('发表成功!');
                    }else{
                        this.$Message.success('发表失败!');
                    }
                  
                })
            },
            SportsCircle(){
                this.$router.push({
                path: `/SportsCircle/` })
            },
            MyTieZi(){
                this.$router.push({
                path: `/MyTieZi/` })
            },
            Team(){
                this.$router.push({
                path: `/Team/` })
            },
            TableMain(){
                this.$router.push({
                path: `/TableMain/` })
            },
            adminOut(){
                sessionStorage.clear();
                this.$router.push({
                path: `/ManagerLogin` })
            },
            Home(){
                sessionStorage.clear();
                this.$router.push({
                path: `/Home` })
            }
        }, 
        created(){  
            // this.userId = sessionStorage.getItem('userId');
            this.$ajax('http://localhost:8081/SportfindAll').then(res=>{
                this.sportsList = res.data;
                console.log(this.sportsList);
            }).catch(function (error){
                console.log(error);
            });
            this.$ajax('http://localhost:8081/ZhuanQuFindAll').then(res=>{
                this.zhuanquDate = res.data;
                console.log(this.zhuanquDate);
            }).catch(function (error){
                console.log(error);
            });
        //      axios('http://localhost:8081/chatCountFindAll?cJpid='+this.userId).then((res) =>{
        //     this.number = res.data;
        // })
        }
    }
</script>